<template>
  <div class="contract-container">
    <v-expansion-panels :value="0" accordion>
      <v-expansion-panel class="contract-person">
        <v-expansion-panel-header class="contract-person-title">
          Contract
          <div class="title-container" @click.stop>
            <v-menu bottom left transition="slide-y-transition">
              <template v-slot:activator="{ on, attrs }">
                <v-btn
                  class="pa-0 title-btn"
                  height="16"
                  width="16"
                  color="#ECEDEE"
                  depressed
                  v-bind="attrs"
                  v-on="on"
                >
                  <v-icon size="16" color="#79839B"> mdi-dots-vertical </v-icon>
                </v-btn>
              </template>
              <v-list min-width="160" class="pa-0">
                <v-list-item>
                  <v-list-item-action class="mr-0">
                    <v-icon size="16" color="#565656"> mdi-delete </v-icon>
                  </v-list-item-action>
                  <v-list-item-content
                    @click="openDeleteServiceContract(selectedServiceContract)"
                    class="pointer"
                  >
                    <v-list-item-title class="text-left list-item-title">
                      Delete Contract
                    </v-list-item-title>
                  </v-list-item-content>
                </v-list-item>
                <v-list-item>
                  <v-list-item-action class="mr-0">
                    <v-icon size="16" color="#565656">
                      mdi-content-copy
                    </v-icon>
                  </v-list-item-action>
                  <v-list-item-content>
                    <v-list-item-title class="text-left list-item-title">
                      Copy Contract
                    </v-list-item-title>
                  </v-list-item-content>
                </v-list-item>
                <v-list-item>
                  <v-list-item-action class="mr-0">
                    <v-icon size="16" color="#565656">
                      mdi-application-export
                    </v-icon>
                  </v-list-item-action>
                  <v-list-item-content>
                    <v-list-item-title class="text-left list-item-title">
                      Export
                    </v-list-item-title>
                  </v-list-item-content>
                </v-list-item>
                <v-list-item>
                  <v-list-item-action class="mr-0">
                    <v-icon size="16" color="#565656">
                      mdi-calendar-import
                    </v-icon>
                  </v-list-item-action>
                  <v-list-item-content>
                    <v-list-item-title class="text-left list-item-title">
                      Import
                    </v-list-item-title>
                  </v-list-item-content>
                </v-list-item>
              </v-list>
            </v-menu>
            <v-tooltip content-class="tooltip" bottom>
              <template v-slot:activator="{ on }">
                <v-btn
                  v-on="on"
                  @click="openAddServiceContract"
                  class="pa-0 title-btn"
                  height="16"
                  width="16"
                  color="#ECEDEE"
                  depressed
                >
                  <v-icon size="16" color="#79839B"> mdi-plus-thick </v-icon>
                </v-btn>
              </template>
              Add Service Contract
            </v-tooltip>
          </div>
        </v-expansion-panel-header>
        <v-expansion-panel-content class="pa-0 my-1">
          <v-expansion-panels
            v-model="selectedIndex"
            class="contract-list"
            accordion
            mandatory
          >
            <v-expansion-panel
              v-for="contract in propContracts"
              :key="contract.id"
              class="contract-list-item elevation-0 my-1"
              active-class="active"
            >
              <v-expansion-panel-header
                class="pa-0 contract-title"
                hide-actions
              >
                <div class="d-flex justify-space-between">
                  <div class="d-flex align-center pa-0 pl-3">
                    <v-img
                      class="rounded-circle contract-img"
                      :src="contract.avatar"
                    ></v-img>
                    <div>
                      <h3>{{ contract.contactInfo }}</h3>
                      <p class="ma-0">{{ contract.cateCode }}</p>
                    </div>
                  </div>
                  <div>
                    <p class="ma-0 mr-3">
                      {{ contract.startDate }} - {{ contract.endDate }}
                    </p>
                  </div>
                </div>
              </v-expansion-panel-header>
              <v-expansion-panel-content>
                <v-card class="contract-list-item-content">
                  <v-card-title
                    class="pa-0 d-flex justify-space-between align-center"
                  >
                    <v-subheader class="contract-content-title">
                      Info
                    </v-subheader>
                    <v-tooltip content-class="tooltip" bottom>
                      <template v-slot:activator="{ on }">
                        <v-btn
                          v-on="on"
                          @click="
                            openEditServiceContract(selectedServiceContract)
                          "
                          class="pa-0 mr-3 contract-content-title-btn"
                          width="16"
                          height="16"
                          color="transparent"
                          depressed
                        >
                          <v-icon size="16" color="#79839B">
                            mdi-square-edit-outline
                          </v-icon>
                        </v-btn>
                      </template>
                      Edit Service Contract
                    </v-tooltip>
                  </v-card-title>
                  <v-card-text class="pa-0">
                    <div class="contract-info-content">
                      {{ contract.contractDescription }}
                    </div>
                    <v-subheader class="pa-3 contract-item">Item</v-subheader>
                    <v-data-table
                      :headers="contractItemHeader"
                      :items="contract.items"
                      class="elevation-0 item-form"
                      disable-sort
                      hide-default-footer
                    >
                      <template #[`item.action`]>
                        <v-btn
                          width="24"
                          height="24"
                          min-width="unset"
                          color="transparent"
                          depressed
                        >
                          <v-icon color="#BABABC">mdi-file</v-icon>
                        </v-btn>
                      </template>
                    </v-data-table>
                  </v-card-text>
                </v-card>
              </v-expansion-panel-content>
            </v-expansion-panel>
          </v-expansion-panels>
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-expansion-panels>
    <Dialog
      v-model="showDialog"
      :title="dialogTitle"
      :show-save="step !== 3"
      :width="dialogWidth"
      @submit="saveServiceContract"
    >
      <template>
        <AddEditServiceContract
          v-if="[1, 2].includes(step)"
          ref="addEditServiceContract"
        ></AddEditServiceContract>
        <Delete
          v-else
          @delete="deleteServiceContract(selectedServiceContract)"
          ref="deleteServiceContract"
          :title="deleteTitle"
          :subtitle="deleteSubtitle"
        ></Delete>
      </template>
    </Dialog>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
import AddEditServiceContract from "@/components/Customer/Dialog/ServiceContract/AddEditServiceContract.vue";
import Delete from "@/components/Customer/Dialog/Delete/Delete.vue";
import { IServiceContract } from "@/components/Customer/index";
@Component({
  components: {
    Dialog,
    AddEditServiceContract,
    Delete,
  },
  props: {
    contracts: {
      type: Array,
      default: () => [],
    },
  },
})
export default class Contract extends Vue {
  get propContracts() {
    return this.$props.contracts;
  }
  selectedIndex: number | null = null;
  selectedServiceContract: IServiceContract | null = null;
  @Watch("selectedIndex")
  selectServiceContract(index: number | undefined) {
    if (typeof index !== "number") {
      this.selectedServiceContract = null;
    } else {
      this.selectedServiceContract = this.propContracts[index];
    }
  }
  // 1.addContract 2.editContract 3.deleteContract
  step = -1;
  // Dialog
  dialogTitle = "";
  showDialog = false;
  get dialogWidth() {
    return this.step === 3 ? 480 : 1152;
  }
  openDialog() {
    this.showDialog = true;
  }
  closeDialog() {
    this.showDialog = false;
  }
  // contract
  contractItemHeader = [
    {
      text: "Item#",
      value: "itemNumber",
    },
    {
      text: "Item Description",
      value: "itemDescription",
    },
    {
      text: "Serial Number",
      value: "serialNumber",
    },
    {
      text: "Alias",
      value: "alias",
    },
    {
      text: "Location Code",
      value: "locationCode",
    },
    {
      text: "QTY",
      value: "QTY",
    },
    {
      text: "Cost",
      value: "cost",
    },
    {
      text: "Date Expire",
      value: "dateExpire",
    },
  ];
  // action
  openAddServiceContract() {
    this.step = 1;
    this.dialogTitle = "Add Service Contract";
    this.$nextTick(() => {
      (this.$refs.addEditServiceContract as AddEditServiceContract).resetForm();
    });
    this.openDialog();
  }

  openEditServiceContract(serviceContract: IServiceContract | null) {
    if (!serviceContract) {
      this.SweetAlertService.warning(
        "Please select the serviceContract you want to edit"
      );
      return;
    }
    this.step = 2;
    this.dialogTitle = "Edit Service Contract";
    this.$nextTick(() => {
      const addEditServiceContractRef = this.$refs
        .addEditServiceContract as AddEditServiceContract;
      addEditServiceContractRef.resetForm();
      setTimeout(() => {
        addEditServiceContractRef.setFormData(serviceContract);
      });
    });
    this.openDialog();
  }

  deleteTitle = "Are you sure to delete the Service Contract?";
  get deleteSubtitle() {
    if (this.selectedServiceContract) {
      return `${this.selectedServiceContract.contactInfo} - ${this.selectedServiceContract.cateCode}`;
    } else {
      return "";
    }
  }
  openDeleteServiceContract(serviceContract: IServiceContract | null) {
    if (!serviceContract) {
      this.SweetAlertService.warning(
        "Please select the Service Contract you want to delete"
      );
      return;
    }
    this.step = 3;
    this.dialogTitle = "Delete";
    this.openDialog();
  }
  async saveServiceContract() {
    const addEditServiceContractRef = this.$refs
      .addEditServiceContract as AddEditServiceContract;
    const result = await addEditServiceContractRef.validateFormData();
    if (result) {
      if (this.step === 1) {
        result.id = String(new Date().getTime());
        this.addServiceContract(result);
      } else {
        this.editServiceContract(result);
      }
      this.closeDialog();
    }
  }
  addServiceContract(serviceContract: IServiceContract) {
    this.propContracts.push(serviceContract);
  }
  editServiceContract(serviceContract: IServiceContract) {
    if (!this.selectedServiceContract) {
      return;
    }
    Object.assign(this.selectedServiceContract, serviceContract);
  }

  deleteServiceContract(serviceContract: IServiceContract | null) {
    if (!serviceContract) {
      return;
    }
    let index = this.propContracts.indexOf(serviceContract);
    this.propContracts.splice(index, 1);
    this.selectedServiceContract = null;
    this.closeDialog();
  }
}
</script>

<style lang="scss" scoped>
@import "@/components/Customer/ContactInfo/Contract.scss";
</style>
